/*
    创建者：shuxiaokai
    创建时间：2021-09-03 20:45
    模块名称：返回header
    备注：
*/
<template>
  <div class="header-view" :class="{ vertical: layout === 'vertical' }">
    <el-table :data="headers" stripe border>
      <el-table-column align="center" prop="key" :label="$t('名称')"></el-table-column>
      <el-table-column align="center" prop="value" :label="$t('值')">
        <template #default="scope">
          <div class="value-wrap">{{ scope.row.value }}</div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  data() {
    return {
    };
  },
  computed: {
    headers() {
      const { header } = this.$store.state['apidoc/response'];
      const result: { key: string, value: string }[] = [];
      Object.keys(header).forEach(key => {
        result.push({
          key,
          value: header[key] as string,
        });
      })
      return result
    },
    //布局
    layout() {
      return this.$store.state['apidoc/baseInfo'].layout;
    },
  },
  methods: {
  },
})
</script>

<style lang="scss">
.header-view {
    width: 100%;
    height: calc(100vh - #{size(370)});
    overflow-y: auto;
    .value-wrap {
        max-height: size(140);
        overflow-y: auto;
    }
    &.vertical {
        height: 100%;
    }
}
</style>
